<template>
  <div>
    <el-row class="rowBorder">
      <el-col :span="24">
        <span>订单信息：{{ data.orderNumber }}</span>
        <el-button type="text" class="rBtn" @click="dialogVisible = true"
          >修改基本信息</el-button
        >
      </el-col>
      <el-col :span="8"
        ><span>归属公司：{{ data.companyName }}</span></el-col
      >
      <el-col :span="8"
        ><span>归属部门：{{ data.departmentName }}</span></el-col
      >
      <el-col :span="8">
        <span
          >归属人员：{{ data.belongName
          }}<b v-if="isShowPhone">{{ data.phoneNumber }}</b></span
        >
        <el-button type="text" @click="showPhone" v-if="!isShowPhone"
          >查看电话号码</el-button
        >
      </el-col>
      <el-col :span="8"
        ><span>推广员：{{ data.generalizeName }}</span></el-col
      >
      <el-col :span="8"
        ><span>签约公司：{{ data.signCompanyName }}</span></el-col
      >
      <el-col :span="8"
        ><span>录入时间：{{ data.inputTime }}</span></el-col
      >
    </el-row>
    <el-dialog
      title="修改基本信息"
      :visible.sync="dialogVisible"
      :destroy-on-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      width="30%"
      center
    >
      <el-form v-if="dialogVisible" class="diaForm" ref="diaForm">
        <el-form-item label="归属公司:" prop="firmId">
          <el-select
            v-model="diaData.companyId"
            placeholder="请选择"
            @change="companyChange"
            popper-class="selectBox"
          >
            <el-option
              v-for="item in companyData"
              :key="item.id"
              :label="item.companyName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="归属部门:">
          <treeselect
            :options="deptData"
            :clearable="false"
            v-model="diaData.deptId"
            :normalizer="normalizer"
            @select="handleNodeClick"
            placeholder="请选择部门"
            noOptionsText="请先选择归属公司"
          />
        </el-form-item>
        <el-form-item label="归属人员:">
          <el-select v-model="diaData.belongId" placeholder="请选择" filterable>
            <el-option
              v-for="item in personnelData"
              :key="item.id"
              :label="item.employeeName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="推广员:">
          <el-input
            placeholder="请填写推广员"
            v-model="diaData.generalizeName"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="签约公司:">
          <el-input
            placeholder="请填写签约公司"
            v-model="diaData.signCompanyName"
            disabled
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDia">取 消</el-button>
        <el-button type="primary" @click="putBaseInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
  getFindOrderMessage,
  pagelist,
  getDepartment,
  postCompanyEmployList,
  putBaseInfo
} from "../../assets/js/api";
export default {
  name: "OrderInformation",
  components: { Treeselect },
  props: ["orderNumber"],
  data() {
    return {
      normalizer(node) {
        //去掉children=[]的children属性
        if (node.children == null) {
          delete node.children;
        }
      },
      describe: {
        describe: ""
      },
      isShowPhone: false,
      data: {},
      diaData: {},
      dialogVisible: false,
      query: {
        firmId: null,
        deptId: null,
        employeeId: null
      },
      queryPersonnel: {
        firmId: null,
        deptId: null
      },
      // 公司数据
      companyData: [],
      // 部门数据
      deptData: [],
      // 人员数据
      personnelData: []
    };
  },
  created() {
    this.getList();
    this.companylist();
  },
  methods: {
    getList() {
      let thisObj = this;
      getFindOrderMessage(this.orderNumber).then(res => {
        this.data = JSON.parse(JSON.stringify(res.data));
        this.diaData = JSON.parse(JSON.stringify(res.data));
        this.queryPersonnel.firmId = res.data.companyId;
        this.query.deptId = res.data.deptId;
        //this.diaData.companyId = Number(res.data.companyId);
        this.$nextTick(() => {
          thisObj.getDepartment(res.data.companyId);
          thisObj.getCompanyEmploy();
        });
      });
    },
    //取消弹框
    closeDia() {
      this.dialogVisible = false;
      this.diaData = JSON.parse(JSON.stringify(this.data));
    },
    //点击查看手机号码
    showPhone() {
      this.isShowPhone = true;
    },
    //提价按钮
    putBaseInfo() {
      let thisObj = this;
      let obj = {};
      obj.belongId = this.diaData.belongId;
      obj.companyId = this.diaData.companyId;
      obj.deptId = this.diaData.deptId;
      obj.orderNumber = this.diaData.orderNumber;
      putBaseInfo(obj).then(res => {
        if (res.code == 200) {
          thisObj.dialogVisible = false;
          thisObj.$message.success(res.message);
          thisObj.getList();
        } else {
          thisObj.$message.error(res.message);
        }
      });
    },
    // 归属公司
    companylist() {
      pagelist().then(res => {
        this.companyData = res.data;
      });
    },
    // 通过选中公司id查询部门
    companyChange(val) {
      this.query.firmId = val;
      this.queryPersonnel.firmId = val;
      this.diaData.deptId = null;
      this.diaData.belongId = null;
      getDepartment(val).then(res => {
        this.deptData = res.data;
      });
      this.postCompanyEmployList(this.queryPersonnel);
    },
    //获取部门list
    getDepartment(obj) {
      getDepartment(obj).then(res => {
        this.deptData = res.data;
      });
    },
    //获取员工
    getCompanyEmploy() {
      postCompanyEmployList(this.queryPersonnel).then(res => {
        this.personnelData = res.data;
      });
    },
    // 获取部门id
    handleNodeClick(data) {
      this.query.deptId = data.id;
      this.queryPersonnel.deptId = data.id;
      this.diaData.belongId = null;
      this.postCompanyEmployList(this.queryPersonnel);
    },
    // 获取归属人员数据
    postCompanyEmployList() {
      postCompanyEmployList(this.queryPersonnel).then(res => {
        this.personnelData = res.data;
      });
    }
  }
};
</script>

<style scoped type="less">
.el-col {
  text-align: left;
}
.el-row {
  padding: 20px 40px;
  line-height: 1.5;
}
.rowBorder {
  border-bottom: 1px rgb(121, 121, 121) solid;
}
.rBtn {
  float: right;
  line-height: 1.5;
}
.diaForm .el-form-item {
  display: flex;
}
.diaForm ::v-deep.el-form-item__label {
  width: 120px;
}
.diaForm ::v-deep.vue-treeselect__control {
  width: unset;
}
</style>
